<template>
  <div class="welcome">
    <!-- 数据统计 -->
    <div class="count-title">数据统计</div>
    <div class="count-item">
      <div class="count-list">
        <p class="count-text">12</p>
        <p class="count-desc">设计库图片总数</p>
      </div>
      <div class="count-list">
        <p class="count-text">10</p>
        <p class="count-desc">案例库案例总数</p>
      </div>
      <div class="count-list">
        <p class="count-text">8</p>
        <p class="count-desc">目前在运营公众号总数</p>
      </div>
    </div>
    <!-- 快速入口 -->
    <div class="product-title">快速入口</div>
    <div class="product-item">
      <!-- 设计库 -->
      <div class="product-list design-list">
        <div class="product-top">
          <div class="product-logo"></div>
          <div class="product-info">
            <div class="product-name">设计库</div>
            <div class="product-desc">最好的设计给最可爱的甲方</div>
          </div>
        </div>
        <div class="product-bottom">
          <span class="operate-btn"
            >立即查看
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="4.961"
              height="8.439"
              viewBox="0 0 4.961 8.439"
            >
              <g transform="translate(77.03 -38.78)">
                <path
                  d="M-76.811,47h0a.752.752,0,0,1,0-1.061L-73.871,43l-2.94-2.939a.752.752,0,0,1,0-1.061h0a.75.75,0,0,1,1.061,0l3.455,3.455a.771.771,0,0,1,0,1.09L-75.75,47A.75.75,0,0,1-76.811,47Z"
                />
              </g></svg
          ></span>
        </div>
      </div>
      <!-- 案例库 -->
      <div class="product-list case-list">
        <div class="product-top">
          <div class="product-logo"></div>
          <div class="product-info">
            <div class="product-name">案例库</div>
            <div class="product-desc">最光亮的秃头给最好的创意</div>
          </div>
        </div>
        <div class="product-bottom">
          <span class="operate-btn"
            >立即查看
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="4.961"
              height="8.439"
              viewBox="0 0 4.961 8.439"
            >
              <g transform="translate(77.03 -38.78)">
                <path
                  d="M-76.811,47h0a.752.752,0,0,1,0-1.061L-73.871,43l-2.94-2.939a.752.752,0,0,1,0-1.061h0a.75.75,0,0,1,1.061,0l3.455,3.455a.771.771,0,0,1,0,1.09L-75.75,47A.75.75,0,0,1-76.811,47Z"
                />
              </g></svg
          ></span>
        </div>
      </div>
      <!-- 资源库 -->
      <div class="product-list resource-list">
        <div class="product-top">
          <div class="product-logo"></div>
          <div class="product-info">
            <div class="product-name">资源库</div>
            <div class="product-desc">最美的遇见给最难过的自己</div>
          </div>
        </div>
        <div class="product-bottom">
          <span class="operate-btn"
            >立即查看
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="4.961"
              height="8.439"
              viewBox="0 0 4.961 8.439"
            >
              <g transform="translate(77.03 -38.78)">
                <path
                  d="M-76.811,47h0a.752.752,0,0,1,0-1.061L-73.871,43l-2.94-2.939a.752.752,0,0,1,0-1.061h0a.75.75,0,0,1,1.061,0l3.455,3.455a.771.771,0,0,1,0,1.09L-75.75,47A.75.75,0,0,1-76.811,47Z"
                />
              </g></svg
          ></span>
        </div>
      </div>
      <!-- 项目库 -->
      <div class="product-list item-list">
        <div class="product-top">
          <div class="product-logo"></div>
          <div class="product-info">
            <div class="product-name">项目库</div>
            <div class="product-desc">最亮的热点给最暴躁的你</div>
          </div>
        </div>
        <div class="product-bottom">
          <span class="operate-btn"
            >立即查看
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="4.961"
              height="8.439"
              viewBox="0 0 4.961 8.439"
            >
              <g transform="translate(77.03 -38.78)">
                <path
                  d="M-76.811,47h0a.752.752,0,0,1,0-1.061L-73.871,43l-2.94-2.939a.752.752,0,0,1,0-1.061h0a.75.75,0,0,1,1.061,0l3.455,3.455a.771.771,0,0,1,0,1.09L-75.75,47A.75.75,0,0,1-76.811,47Z"
                />
              </g></svg
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.welcome {
  height: 100%;
  .count-title,
  .product-title {
    height: 44px;
    line-height: 24px;
    padding-bottom: 20px;
    color: #333;
    box-sizing: border-box;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    &::before {
      content: '';
      position: relative;
      top: 5px;
      display: inline-block;
      vertical-align: top;
      margin-right: 8px;
      width: 4px;
      height: 16px;
      background: rgba(40, 130, 255, 1);
      border-radius: 3px;
    }
  }
  .count-item {
    width: 100%;
    display: flex;
    .count-list {
      flex: 1;
      margin-right: 32px;
      height: 168px;
      background: linear-gradient(60deg, #627cf1 0, #899ffc 100%);
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .count-text {
        font-size: 54px;
        color: #fff;
        font-weight: 700;
      }
      .count-desc {
        font-size: 16px;
        color: #fff;
        margin-top: 20px;
      }
      &:nth-child(2) {
        background: linear-gradient(60deg, #f6494a 0, #fe7d7d 100%);
      }
      &:last-child {
        margin-right: 0;
        background: linear-gradient(60deg, #1ebdde 0, #35ceec 100%);
      }
    }
  }
  .product-title {
    margin-top: 24px;
  }
  .product-item {
    width: 100%;
    .product-list {
      width: calc((100% - 3 * 32px) / 4);
      position: relative;
      margin: 0 32px 32px 0;
      display: inline-block;
      vertical-align: top;
      max-width: 296px;
      min-width: 260px;
      height: 143px;
      background-color: #fff;
      box-shadow: 0 4px 20px rgb(19 19 51 / 4%);
      border-radius: 4px;
      z-index: 1;
      font-size: 0;
      font-family: Microsoft YaHei;
      font-weight: 400;
      transition: box-shadow 0.15s;
      cursor: pointer;
      &:hover {
        box-shadow: 0 6px 20px rgba(19, 19, 51, 0.08),
          0 6px 10px rgba(19, 19, 51, 0.04);
      }
      .product-top {
        width: 100%;
        height: 96px;
        padding: 24px 30px;
        font-size: 0;
        box-sizing: border-box;
        cursor: pointer;
        .product-logo {
          content: '';
          float: left;
          margin-right: 18px;
          width: 48px;
          height: 48px;
          background-image: url('../assets/images/logo-icon-wrapper.png');
          background-repeat: no-repeat;
          background-size: 275px 160px;
        }
        .product-info {
          float: left;
          width: calc(100% - 66px);
          text-align: left;
          .product-name {
            margin-bottom: 5px;
            line-height: 24px;
            font-size: 16px;
            font-weight: bold;
            color: #333;
          }
          .product-desc {
            color: #888;
            font-size: 13px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .product-bottom {
        position: relative;
        height: 47px;
        line-height: 46px;
        text-align: center;
        border-top: 1px solid #f2f2f2;
        box-sizing: border-box;
        .operate-btn {
          position: relative;
          float: left;
          width: 100%;
          height: 100%;
          color: #666;
          font-size: 14px;
          cursor: pointer;
          transition: color 0.15s, padding-right 0.15s, background-color 0.15s;
          border-radius: 0 0 4px 4px;
          box-sizing: border-box;
          svg {
            position: relative;
            top: -1px;
            margin-left: 5px;
            opacity: 0;
            fill: transparent;
            transition: fill 0.15s, opacity 0.15s;
          }
          &:hover {
            padding-right: 10px;
            color: #fff;
            background-color: #2882ff;
            svg {
              fill: #fff;
              opacity: 1;
            }
          }
        }
      }
    }
    .design-list .product-logo {
      background-position: -165px 0;
    }
    .case-list .product-logo {
      background-position: -110px 0;
    }
    .resource-list .product-logo {
      background-position: 0 -55px;
    }
    .item-list .product-logo {
      background-position: -110px -110px;
    }
  }
}
</style>